<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
  <div  v-demo="LightSlateGray : msg"></div>
</div>
<script>
  Vue.directive('demo', {
    bind: function () {
      // 做绑定的准备工作
      // 比如添加事件监听器，或是其他只需要执行一次的复杂操作
      this.el.style.color = '#fff'
      this.el.style.backgroundColor = this.arg
    },
    update: function (value) {
      // 根据获得的新值执行对应的更新
      // 对于初始值也会被调用一次
      // el: 指令绑定的元素
      // vm: 拥有该指令的上下文 ViewModel
      // expression: 指令的表达式，不包括参数和过滤器
      // arg: 指令的参数
      // raw: 未被解析的原始表达式
      // name: 不带前缀的指令名
      this.el.innerHTML =
        'name - '       + this.name + '<br>' +
        'raw - '        + this.raw + '<br>' +
        'expression - ' + this.expression + '<br>' +
        'argument - '   + this.arg + '<br>' +
        'value - '      + value
        //  name - demo
        //   raw - LightSlateGray : msg
        //   expression - msg
        //   argument - LightSlateGray
        //   value - hello!
    },
    unbind: function (){
      // 做清理工作
      // 比如移除在 bind() 中添加的事件监听器
    }
  })
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  });

</script>
</body>
</html>